<template>
	<view class="search-content">
		 <up-navbar
		            :autoBack="true"
					:fixed="false"
					border
					height="70px"
		        >
			<template #center>
				<up-search 
				margin="0 120rpx 0 100rpx" 
				placeholder="请输入要搜索的内容" 
				focus 
				:showAction="false" 
				@search="handleSearch"
				v-model="keyword"></up-search>
			</template>
			<template #right>
				<view @click="handleSearch">搜索</view>
			</template>
		 </up-navbar>
		<view class="history-content" v-if="historyList.value.length">
			<view class="history-search-title">
				<text>历史搜索</text>
				<up-icon name="trash" color="#a1a1a1" size="15" @click="handleDelete"></up-icon>
			</view>
			<view class="history-list">
				<view v-for="(item,index) in historyList.value" @click="handleSearch(item)">{{item}}</view>
			</view>
		</view>
		<view class="hot-search-content">
			<view class="hot-search-title">
				<up-icon name="search" color="#a1a1a1" size="20"></up-icon>
				<text>热门搜索</text>
			</view>
			<view class="hot-search-list">
				<view v-for="(item,index) in hotList.value" :key="item.id" @click="handleSearch(item.keywords)">
					<text>{{item.keywords}}</text>
					<up-icon v-if="index < 2" name="thumb-up-fill" color="#e11b18" size="20" @click=""></up-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue'
import {getHotWords} from '../../api/search.js'
const keyword = ref('')
const historyList = reactive([])
const hotList = reactive([])
const handleSearch = (v)=> {
	if (v && typeof v === 'string') {
		keyword.value = v
	}
	let text = keyword.value.trim()
	if (!text) return
	let value = uni.getStorageSync('historyData') ? JSON.parse(uni.getStorageSync('historyData')) : []
	let index = value.indexOf(keyword.value)
		
	if (index > -1) {
		value.splice(index,1)
		
	}
	value.unshift(text)
	uni.setStorageSync('historyData',JSON.stringify(value))
	historyList.value = value
	uni.navigateTo({
		url: `/pages/search/search2?keyword=${text}`
	})
}


const getHistoryList = ()=>{
	let value = uni.getStorageSync('historyData')
	if (value) {
		historyList.value = JSON.parse(value)
	} else {
		historyList.value = []
	}
}
const handleDelete = ()=> {
	uni.showModal({
		title: '提示',
			content: '您确认清空所有的历史搜索记录吗？',
			success: function (res) {
				if (res.confirm) {
					uni.removeStorageSync('historyData');
					getHistoryList()
				}
			}
	})
}
onLoad(async ()=>{
	getHistoryList()
	let res = await getHotWords()
	hotList.value = res.data.list || []
	
})
</script>

<style lang=scss>
.history-content{
	padding: 0 30rpx;
}
.history-search-title{
	display: flex;
	justify-content: space-between;
	margin-top: 30rpx;
	color: #747474;
	font-size: 28rpx;
	font-weight: 700;
}
.history-list{
  max-height: 400rpx;
  margin-top: 30rpx;
  width: 100%;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  color: #747474;
  >view {
	  padding: 0 20rpx;
	  height: 50rpx;
	  line-height: 50rpx;
	  border-radius: 10rpx;
	  background-color: #e5e5e5;
	  margin-right: 50rpx;
	  margin-bottom: 30rpx;
  }
}
.hot-search-content{
	padding: 0 20rpx;
	margin-top: 30rpx;
	.hot-search-title{
		display: flex;
		color: #747474;
		font-size: 28rpx;
		font-weight: 700;
		position: relative;
		margin-bottom: 30rpx;
		&::after{
			content: '';
			width: 100%;
			height: 1rpx;
			background-color: #dadbde;
			position: absolute;
			bottom: -30rpx;
			left: 0; 
			right: 0;
		}
	}
	.hot-search-list{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		padding: 25rpx 20rpx;
		>view{
			display: flex;
			align-items: center;
			width: 50%;
			margin-bottom: 20rpx;
			color: #747474;
			>text{
				margin-right: 10rpx;
			}
			
		}
	}
}

</style>
